<template>
  <div class="history">
    <header>
      <p>历史记录</p>
      <p @click.stop="$store.commit('removeAll')" style="color:red;">
        全部删除
      </p>
    </header>
    <ul>
      <li v-for="(v, i) in $store.state.objList" :key="i">
        <span @click="pushValue(v)">{{ v }}</span>
        <b @click.stop="$store.commit('remove', i)">X</b>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup(props, { emit }) {
    let store = useStore();
    function pushValue(v) {
      emit("searchChange", v);
      store.commit("pushValues", v);
    }

    return { pushValue };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.history {
  width: 100%;
  header {
    width: 100%;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 10px;
      border: 1px solid #000;
      margin: 10px;
      list-style: none;
      border-radius: 15px;
      b {
        margin-left: 30px;
      }
    }
  }
}
</style>
